<template>
	<!-- 发布车品 选择车型-->
	<view class="content">
		<view class="added">
      <!-- 已添加车型标题 -->
			<view class="addtext">
				<view class="adtname">
					已添加车型 {{selectedList.length}}/50
				</view>
				<view class="adqk" @click="resetEmpty">清空</view>
			</view>
      
			<view v-show="selectedList.length === 0" class="pleasechoose">
				—— 请在下列选择对应车型，最多选择50条 ——
			</view>
      
      <!-- 已添加车型列表 -->
			<view class="brands">
				<!-- 全部选择数据 -->
				<view class="brandxlpz flex flex-ai-c flex-jc-sb" v-show="displaybrand" v-for="(item,index) in selectedList" :key="item.id">
					<text class="braname">
						<!-- {{item.bName}} {{item.cName}} {{item.name}} -->
						{{ item.name }}
					</text>
          <view @click="brandclickdelete(item, index)">
            <i-icon icon="iconquxiaoxunjia" size="30rpx" color="#E1E1E1"></i-icon>
          </view>
				</view>
        
				<!-- 只显示两条数据 -->
				<view class="brandxlpz flex flex-ai-c flex-jc-sb" v-show="!displaybrand" v-for="(item,index) in selectedList.slice(0, 2)" :key="index">
					<view class="braname">
						<!-- {{item.bName}} {{item.cName}} {{item.name}} -->
						{{ item.name }}
					</view>
          <view @click="brandclickdelete(item, index)">
            <i-icon icon="iconquxiaoxunjia" size="30rpx" color="#E1E1E1"></i-icon>
          </view>
				</view>
        
				<!-- 查看更多 -->
				<view class="lookxq" @click="lookmorclick" v-show="selectedList.length > 2">
					<view class="gengd">
						<view>{{ lookmore }}</view>
						<view :class="displaybrand ? 'lookxqimggo' : 'lookxqimg'">
						</view>
					</view>
				</view>
			</view>
		</view>
    
    <!-- 使用所有车型开关 -->
		<view class="terminal">
			<view class="terswi1">
				<view class="title">适用所有车型</view>
				<view class="xuanze">
					<u-switch v-model="isCarTypeAll" active-color="#41cb05" inactive-color="#E1E1E1" :loading="loading" size="40" @change="setCarAllChange"></u-switch>
				</view>
			</view>
		</view>
    
    <!-- 车型列表 -->
		<view class="boxsds">
			 <scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
				<view v-for="(item, index) in Brandlist" :id="item.initial" :key="item.initial">
          <!-- 字母 -->
					<view class="abcd">{{ item.initial }}</view>
          
          <!-- 内容 -->
          <view class="Brandcss">
            <view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
              <!-- 品牌 -->
              <view class="brandcss flex-ai-c" @click="selectCarLevel1(item1)">
                <view class="iconimg">
                  <image :src="'https://files.yzsheng.com/goodimg/brandimg/'+item1.bid+'.png'" mode="aspectFit"></image>
                </view>
                <view class="branname">{{item1.brand}}</view>
                <view :class="['ppxilie-box', checkedBrand === item1.bid ? 'ppjiantougo' : 'ppjiantou']">
                  <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
                </view>
              </view>
              <!-- 系列 -->
              <view class="xieliecss" v-show="checkedBrand === item1.bid">
                <view class="xilie" v-for="(item2, index2) in item1.cartypeList" :key="index2">
                  <view class="cartycss flex-ai-c" @tap="selectCarLevel2(item2)">
                    <view class="xiliename">{{item2.carTypeName}}</view>
                    <view :class="['ppxilie-box', pzxuanzebrand === item2.carTypeId ? 'ppjiantougo' : 'ppjiantou']">
                      <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
                    </view>
                  </view>
                  <view class="peizhibox">
                    <view class="peizhicss" v-show="pzxuanzebrand === item2.carTypeId">
                      <view class="peizhi" v-for="(item3, index3) in item2.carList" :key="index3">
                        <view v-for="(car, i) in item3.list" :key="car.id" class="flex flex-ai-c" @click="selectCarLevel3(car, item2, item1)">
                          <i-icon
                            :icon="car.checked ? 'icongouxuan' : 'icontuoyuan'"
                            :type="car.checked ? 'm' : 'single'"
                            size="40rpx"
                          ></i-icon>
                          <view class="font-26 color-666 ml-20">{{car.name}}</view>                          
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
			</scroll-view>
			<!-- 右边ABC -->
			<view class="floor">
				<view v-for="(item,index) in indexlist" :data-id="item" :key="index" class="color-999" @tap="bindToView">
					{{item}}
				</view>
			</view>
		</view>
    
    <!-- 固定在底部的按钮 -->
		<view class="btncss">
			<view class="btnboxs">
				<view class="cancel" @click="cancel()">取消</view>
				<view class="determine" @click="confirm()">确定</view>
			</view>
		</view>
	</view>
</template>

<script src="./selectCarType.js"></script>

<style lang="scss" scoped>
  @import './selectCarType.scss';
</style>

